<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" layout:decorate="main"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <script th:src="@{/js/echarts.js}" src="../static/js/echarts.js"></script>
    <link th:href="@{/localcss/crmlist.css}" href="../static/localcss/crmlist.css" rel="stylesheet">
    <title>客户贡献分析</title>
</head>
<body>
<div layout:fragment="content">
    <div class="">
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>
                            客户贡献分析 <i class="fa fa-user"></i>
                        </h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <form method="post" action="/contrRpt/list" th:action="@{/contrRpt/list}">
                            <input type="hidden" name="pageIndex" value="1"/>
                            <ul>
                                <li>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">客户名称</label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input name="custName" type="text" th:value="${custName}"
                                                   class="form-control col-md-6 col-xs-12" value="">
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <button type="submit" class="btn btn-primary"> 查 &nbsp;&nbsp;&nbsp;&nbsp;询</button>
                                </li>
                            </ul>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_content">
                        <p class="text-muted font-13 m-b-30"></p>
                        <div id="datatable-responsive_wrapper"
                             class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                            <div class="row">
                                <div class="col-sm-12">
                                    <table id="datatable-responsive"
                                           class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed"
                                           cellspacing="0" width="100%" role="grid"
                                           aria-describedby="datatable-responsive_info" style="width: 100%;">
                                        <thead>
                                        <tr role="row">
                                            <th class="sorting_asc" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="First name: activate to sort column descending"
                                                aria-sort="ascending">编号
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                客户名称
                                            </th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                订单金额（元）
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr role="row" class="odd" th:each="contrRptVo,stat:${contrRptVoPage.records}">
                                            <td tabindex="0" class="sorting_1" th:text="${stat.count}">custNo</td>
                                            <td class="custname" th:text="${contrRptVo.custName}">custName</td>
                                            <td class="amount" th:text="${contrRptVo.odrAmount}">odrAmount</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-5">
                                    <div class="dataTables_info" id="datatable-responsive_info"
                                         role="status" aria-live="polite">共<span th:text="${contrRptVoPage.total}">1</span>条记录
                                        <span th:text="${contrRptVoPage.current }">1</span>/<span th:text="${contrRptVoPage.pages }">1</span>页</div>
                                </div>
                                <div class="col-sm-7">
                                    <div class="dataTables_paginate paging_simple_numbers"
                                         id="datatable-responsive_paginate">
                                        <ul class="pagination">
                                            <li class="paginate_button previous" th:if="${contrRptVoPage.current gt 1}"><a
                                                    href="javascript:page_nav(document.forms[0],1);"
                                                    aria-controls="datatable-responsive" data-dt-idx="0"
                                                    tabindex="0">首页</a>
                                            </li>
                                            <li class="paginate_button " th:if="${contrRptVoPage.current gt 1}"><a
                                                    href="#" th:onclick="'javascript:page_nav(document.forms[0],'+${contrRptVoPage.current - 1 }+');'"
                                                    aria-controls="datatable-responsive" data-dt-idx="1"
                                                    tabindex="0">上一页</a>
                                            </li>
                                            <li class="paginate_button " th:if="${(contrRptVoPage.current) lt contrRptVoPage.pages}"><a
                                                    href="#" th:onclick="'javascript:page_nav(document.forms[0],'+${contrRptVoPage.current+1 }+');'"
                                                    aria-controls="datatable-responsive" data-dt-idx="1"
                                                    tabindex="0">下一页</a>
                                            </li>
                                            <li class="paginate_button next" th:if="${(contrRptVoPage.current) lt contrRptVoPage.pages}"><a
                                                    href="#" th:onclick="'javascript:page_nav(document.forms[0],'+${contrRptVoPage.pages }+');'"
                                                    aria-controls="datatable-responsive" data-dt-idx="7"
                                                    tabindex="0">最后一页</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div id="main" style="width: 300px;height:300px; margin: auto;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script layout:fragment="js">
    $(document).ready(function(){
        $.ajax({
            type:"GET",
            url:"/contrRpt/getContrRpt",
            dataType:"json",
            success:function(data){
                var myChart = echarts.init(document.getElementById('main'));

                var dataForChart = [];
                for(var i in data){
                    dataForChart.push({ name:  data[i].custName, value:  data[i].odrAmount });
                }
                var option = {
                    title: {
                        text: '客户贡献分析图',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    // legend: {
                    //     orient: 'vertical',
                    //     left: 'left'
                    // },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: dataForChart,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                option && myChart.setOption(option);
            },
            error:function(data){
                alert("对不起，获取数据失败！");
            }
        });
    });
</script>
</html>